<template>
  <div class="project-detail layout flex-col">
    <a-tabs type="line" @change="changeTab" v-model="activeKey" tabPosition="left" size="small">
      <a-tab-pane key="base" tab="基本信息" class="base-info">
        <project-view :project="this.project"></project-view>
      </a-tab-pane>
      <a-tab-pane key="interface-group" tab="接口分组">
        <project-interface-group :project="this.project"></project-interface-group>
      </a-tab-pane>
      <a-tab-pane key="interface-list" tab="接口列表">
        <project-interface :project="this.project"></project-interface>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import ProjectView from '@/views/investmentOnline/interfaceManage/ProjectView'
  import ProjectInterface from '@/views/investmentOnline/interfaceManage/ProjectInterface'
  import ProjectInterfaceGroup from '@/views/investmentOnline/interfaceManage/ProjectInterfaceGroup'

  export default {
    name: 'ProjectManageDetail',
    data() {
      return {
        activeKey: 'base',
      }
    },
    components: {
      // 项目本信息页面
      ProjectView,
      // 项目接口分组管理
      ProjectInterfaceGroup,
      // 项目接口列表页面
      ProjectInterface,
    },
    props: {
      project: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String,
        default: ''
      }
    },
    created() {

    },
    methods: {
      changeTab() {

      }
    },
    watch: {}
  }
</script>

<style lang="less" scoped>
  .project-detail {
    .center {
      height: 100%;
    }
    .ant-tabs {
      height: 100%;
      width: 100%;
      padding-left: 10px;
    }
    .ant-tabs-left-content {
      padding-left: 0px;
      border-left: none;
    }
    .base-info {
      padding-left: 10px;
      padding-top: 8px;
    }
  }
</style>
